<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>放大镜</title>
		<style>
			/* *{
				margin: 0px;
			} */
			#fdj{
				position: relative;
				width: 450px;
				height: 450px;
			}
			img{
				width: 450px;
				height: 450px;
			}
			.mengban{
				position: absolute;
				display: none;
				width: 225px;
				height: 225px;
				background-color: #00ffff;
				opacity: 0.5;
				cursor: move;
				left: 0px;
				top: 0px;
			}
			.fdjBox{
				position: absolute;
				width: 450px;
				height: 450px;
				left: 450px;
				top: 0px;
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="fdj">
			<img src="img/lunbo450.jpg"/>
			<div class="mengban"></div>
			<div class="fdjBox"></div>
		</div>
		<script>
			window.onload=function(){
				let fdj=document.getElementById("fdj");
				let mengban=document.getElementsByClassName("mengban")[0];
				let fdjBox=document.getElementsByClassName("fdjBox")[0];
				//获取图片的尺寸
				let imgWidth=fdj.getElementsByTagName("img")[0].width;
				fdj.onmousemove=function(event){
					//求盖板的中心的坐标。
					let left=event.clientX-this.offsetLeft-imgWidth/2/2;
					let top=event.clientY-this.offsetTop-imgWidth/2/2;
					//左上右下四个方向，限制盖板的移动范围。
					if(left<0){
						left=0;
					}
					if(top<0){
						top=0;
					}
					if(left>this.offsetWidth-imgWidth/2){
						left=this.offsetWidth-imgWidth/2
					}
					if(top>this.offsetHeight-imgWidth/2){
						top=this.offsetHeight-imgWidth/2;
					}
					//给盖板设置横纵坐标，让它是可见的。
					mengban.style.left=left+"px";
					mengban.style.top=top+"px";
					mengban.style.display="block";
					//给右侧的放大图设置图片，
					fdjBox.style.backgroundImage="url(img/lunbo450.jpg)";
					//当容器与图片大小不匹配的时候，默认情况下，图片是重复平铺的，我们需要让它不重复。
					fdjBox.style.backgroundRepeat="no-repeat";
					//设置对应的图片起始位置，
					fdjBox.style.backgroundPosition=-left*2+"px"+" "+(-top)*2+"px";
					//放大的图显示出来。
					fdjBox.style.display="block";
				};
				fdj.onmouseout=function(){
					//当鼠标移出放大镜范围，就把盖板和放大结果图都隐藏起来。
					mengban.style.display="none";
					fdjBox.style.display="none";
				}
				
			};
		</script>
	</body>
</html>